// 用户表单模态框组件
function UserFormModal({ isOpen, onClose, onSubmit, user = null, role = 'TEACHER' }) {
    const [formData, setFormData] = React.useState({
        realName: '',
        phone: '',
        email: '',
        username: '',
        role: role
    });
    const [errors, setErrors] = React.useState({});

    // 初始化表单数据
    React.useEffect(() => {
        if (user) {
            setFormData({
                realName: user.realName || '',
                phone: user.phone || '',
                email: user.email || '',
                username: user.username || '',
                role: 'TEACHER' // 总是使用大写角色值
            });
        } else {
            setFormData({
                realName: '',
                phone: '',
                email: '',
                username: '',
                role: 'TEACHER' // 总是使用大写角色值
            });
        }
        setErrors({});
    }, [user, role, isOpen]);

    // 处理输入变化
    const handleInputChange = (field, value) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }));
        
        // 如果修改手机号，自动更新用户名
        if (field === 'phone') {
            setFormData(prev => ({
                ...prev,
                username: value
            }));
        }
        
        // 清除对应字段的错误
        if (errors[field]) {
            setErrors(prev => ({
                ...prev,
                [field]: ''
            }));
        }
    };

    // 验证表单
    const validateForm = () => {
        const newErrors = {};
        
        if (!formData.realName.trim()) {
            newErrors.realName = '姓名不能为空';
        }
        
        if (!formData.phone.trim()) {
            newErrors.phone = '手机号不能为空';
        } else if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
            newErrors.phone = '请输入正确的手机号格式';
        }
        
        if (!formData.email.trim()) {
            newErrors.email = '邮箱不能为空';
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
            newErrors.email = '请输入正确的邮箱格式';
        }
        
        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    // 处理提交
    const handleSubmit = (e) => {
        e.preventDefault();
        if (validateForm()) {
            onSubmit(formData);
        }
    };

    if (!isOpen) return null;

    return React.createElement('div', { 
        className: 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4' 
    },
        React.createElement('div', { 
            className: 'bg-white rounded-lg shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto' 
        },
            // 标题栏
            React.createElement('div', { className: 'px-6 py-4 border-b border-gray-200' },
                React.createElement('h3', { className: 'text-lg font-semibold text-gray-900' },
                    user ? `编辑${role === 'teacher' ? '教师' : '学生'}` : `新增${role === 'teacher' ? '教师' : '学生'}`
                )
            ),
            
            // 表单内容
            React.createElement('form', { onSubmit: handleSubmit, className: 'p-6 space-y-4' },
                // 姓名字段
                React.createElement('div', null,
                    React.createElement('label', { 
                        className: 'block text-sm font-medium text-gray-700 mb-1',
                        htmlFor: 'realName'
                    }, '姓名 *'),
                    React.createElement('input', {
                        id: 'realName',
                        type: 'text',
                        value: formData.realName,
                        onChange: (e) => handleInputChange('realName', e.target.value),
                        className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                            errors.realName ? 'border-red-500' : 'border-gray-300'
                        }`,
                        placeholder: '请输入姓名'
                    }),
                    errors.realName && React.createElement('p', { className: 'text-red-500 text-xs mt-1' }, errors.realName)
                ),
                
                // 手机号字段
                React.createElement('div', null,
                    React.createElement('label', { 
                        className: 'block text-sm font-medium text-gray-700 mb-1',
                        htmlFor: 'phone'
                    }, '手机号 *'),
                    React.createElement('input', {
                        id: 'phone',
                        type: 'tel',
                        value: formData.phone,
                        onChange: (e) => handleInputChange('phone', e.target.value),
                        className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                            errors.phone ? 'border-red-500' : 'border-gray-300'
                        }`,
                        placeholder: '请输入手机号'
                    }),
                    errors.phone && React.createElement('p', { className: 'text-red-500 text-xs mt-1' }, errors.phone)
                ),
                
                // 隐藏的用户名字段，用于表单提交
                React.createElement('input', {
                    id: 'username',
                    type: 'hidden',
                    value: formData.username
                }),
                
                // 邮箱字段
                React.createElement('div', null,
                    React.createElement('label', { 
                        className: 'block text-sm font-medium text-gray-700 mb-1',
                        htmlFor: 'email'
                    }, '邮箱 *'),
                    React.createElement('input', {
                        id: 'email',
                        type: 'email',
                        value: formData.email,
                        onChange: (e) => handleInputChange('email', e.target.value),
                        className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                            errors.email ? 'border-red-500' : 'border-gray-300'
                        }`,
                        placeholder: '请输入邮箱地址'
                    }),
                    errors.email && React.createElement('p', { className: 'text-red-500 text-xs mt-1' }, errors.email)
                ),
                
                // 隐藏的角色字段，固定为教师角色
                React.createElement('input', {
                    id: 'role',
                    type: 'hidden',
                    value: 'teacher'
                })
            ),
            
            // 按钮区域
            React.createElement('div', { className: 'px-6 py-4 border-t border-gray-200 flex justify-end space-x-3' },
                React.createElement('button', {
                    type: 'button',
                    onClick: onClose,
                    className: 'px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500'
                }, '取消'),
                React.createElement('button', {
                    type: 'submit',
                    onClick: handleSubmit,
                    className: 'px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500'
                }, user ? '保存' : '新增')
            )
        )
    );
}

// 将组件暴露到全局作用域，使其可被其他脚本访问
window.UserFormModal = UserFormModal;